<template>
  <div class="home">
    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple">8</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">8</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple">8</div></el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple">6</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">6</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">6</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">6</div></el-col>
    </el-row>

    <el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
  <el-button type="info" plain>信息按钮</el-button>
  <el-button type="warning" plain>警告按钮</el-button>
  <el-button type="danger" plain>危险按钮</el-button>
</el-row>

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

  <el-radio v-model="radio" label="1">male</el-radio>
  <el-radio v-model="radio" label="2">female</el-radio>

      <div>
        <el-radio-group v-model="city">
          <el-radio-button label="上海"></el-radio-button>
          <el-radio-button label="北京"></el-radio-button>
          <el-radio-button label="广州"></el-radio-button>
          <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>
      </div>
      <div style="margin-top: 20px">
        <el-radio-group v-model="city" size="medium">
          <el-radio-button label="上海" ></el-radio-button>
          <el-radio-button label="北京"></el-radio-button>
          <el-radio-button label="广州"></el-radio-button>
          <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>
      </div>
      <div style="margin-top: 20px">
        <el-radio-group v-model="city" size="small">
          <el-radio-button label="上海"></el-radio-button>
          <el-radio-button label="北京" disabled ></el-radio-button>
          <el-radio-button label="广州"></el-radio-button>
          <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>
      </div>
      <div style="margin-top: 20px">
        <el-radio-group v-model="city" disabled size="mini">
          <el-radio-button label="上海"></el-radio-button>
          <el-radio-button label="北京"></el-radio-button>
          <el-radio-button label="广州"></el-radio-button>
          <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>
      </div>


      <el-form status-icon :rules="rules" ref="ruleForm" :model="ruleForm" label-width="80px">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="onSubmit('ruleForm')">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  
  name: 'Home',
  data () {
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('密码不为空，请输入密码'));
        } else {
          //数字大小写字母特殊字符组成，长度不能小于6
      var reg =  /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{6,}$/
        if(!reg.test(value)){
          callback(new Error("密码必须包含数字,大小写字母,特殊字符,至少6位"))
        }else{
          callback()
        }
          /* if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback(); */
        }
      };
    var validateCheckPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        radio: '1',
        city:"上海",
        ruleForm: {
          name: '',
          pass:"",
          checkPass:""
        },
        rules:{
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          pass: [
            { required: true, validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { required: true, validator: validateCheckPass, trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      onSubmit(formName) {
        // console.log('submit!');
        this.$refs[formName].validate((valid) => {
          console.log(valid)  //true/false
            if (valid) {
            alert("submit!");
            console.log(this.ruleForm)
            // var {username,pass} = this.ruleForm
                // this.$http.post("/login",{username,pass}).then(res=>{
                //     console.log(res.data.auth)
                //     if(res.data.auth){
                //         this.$router.push("/home")
                //     }else{
                //         alert(res.data.msg)
                //     }
                // })
            } else {
            console.log("error submit!!");
            return false;
            }
        });
        },
      }
    }
</script>
<style>
.el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #0f5bc5;
  }
  .bg-purple {
    background: #b41f88;
  }
  .bg-purple-light {
    background: #a2c916;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #ce201a;
  }
</style>